<nz-modal [(nzVisible)]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel()">
  <ng-template #modalTitle>
    修改部门
  </ng-template>

  <ng-template #modalContent>
    <form nz-form [formGroup]="validateForm" *ngIf="active">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="departmentName" nzRequired>
          <span>
            部门名称
            <i nz-icon nz-tooltip nzTitle="请输入部门名称" type="question-circle" theme="outline"></i>
          </span>
        </nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input id="departmentName" formControlName="departmentName" [(ngModel)]="department.departmentName">
          <nz-form-explain *ngIf="validateForm.get('departmentName').dirty && validateForm.get('departmentName').errors">请输入部门名称!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="code" nzRequired>
          <span>
            部门编码
            <i nz-icon nz-tooltip nzTitle="请输入部门编码" type="question-circle" theme="outline"></i>
          </span>
        </nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input id="code" formControlName="code" [(ngModel)]="department.code">
          <nz-form-explain *ngIf="validateForm.get('code').dirty && validateForm.get('code').errors">请输入部门编码!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="parentId">上级部门</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.controls['parentId']">
          <nz-tree-select style="width: 250px"
                          [nzNodes]="parentDepartments"
                          [nzDefaultExpandAll]="true"
                          formControlName="parentId"
                          id="parentId"
                          nzPlaceHolder=""
                          [(ngModel)]="department.parentId">
          </nz-tree-select>
          <nz-form-explain *ngIf="validateForm.get('parentId').dirty && validateForm.get('parentId').errors">请选择上级部门!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="summary">
          <span>
            部门简介
            <i nz-icon nz-tooltip nzTitle="请输入部门简介" type="question-circle" theme="outline"></i>
          </span>
        </nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <textarea nz-input id="summary" formControlName="summary" rows="3" [(ngModel)]="department.summary"></textarea>
          <nz-form-explain *ngIf="validateForm.get('summary').dirty && validateForm.get('summary').errors">请输入部门简介!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="taxis" nzRequired>
          <span>
            排序
            <i nz-icon nz-tooltip nzTitle="请输入排序" type="question-circle" theme="outline"></i>
          </span>
        </nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input id="taxis" formControlName="taxis" [(ngModel)]="department.taxis">
          <nz-form-explain *ngIf="validateForm.get('taxis').dirty && validateForm.get('taxis').errors">请输入排序!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>

    </form>
  </ng-template>

  <ng-template #modalFooter>
    <button nz-button nzType="default" (click)="handleCancel()">取消</button>
    <button nz-button type="submit" [nzType]="'primary'" (click)="handleSave()" [nzLoading]="isConfirmLoading">保存</button>
  </ng-template>
</nz-modal>
